<template>
  <div class="shareContainer" ref="shareContainer">
    <el-steps :active="Number(currentStep)" simple id="waybill_process">
      <el-step
        v-for="item in stepsData"
        :status="item.is_complete === 1 ? 'success' : 'wait'"
        :key="item.step"
        @click.native="handleStepClick(item.step)"
        :class="{
          current: item.step === currentStep * 1, // 当前
          progress: item.is_create === 1 && item.is_complete === 0, //已创建未完成 进行中
        }"
        :title="item.title"
      >
      </el-step>
    </el-steps>
    <div class="step_content">
      <div class="step_th">
        {{ waybillInfo.waybill_number }} ({{
          statusData[this.waybillInfo.status]
        }})
      </div>
      <!-- 显示详情
        businessType业务类型 1-常温零担 2-常温整车  3-冷链零担 4-冷链整车
        changeStatus 运单状态变化
      -->

      <template>
        <SelectWrap
          :waybillInfo="waybillInfo"
          :is_incubator="is_incubator"
          :businessType="businessType"
          @updateFinish="updateFinish"
          @changeStatus="handleChangeStatus"
          :step="Number(currentStep)"
        ></SelectWrap>
      </template>
    </div>
  </div>
</template>

<script>
import TemperatureBind from "../../components/temperatureBind.vue";
import SelectWrap from "../../components/selectWrap.vue";
import {
  deliveryAddFn,
  TrunklineAddFn,
  TransportDetail,
  WaybillDetailFn,
  RecycleDetailFn,
  getTransportsList,
  waybillStepStatus,
} from "@/api/waybill";
import { statusArr } from "../../constants/index.js";
import { MessageBox } from "element-ui";
export default {
  name: "waybillProcess",
  components: {
    TemperatureBind,
    SelectWrap,
  },
  data() {
    return {
      initStep: "", // 进来应该到第几步   小于的打对钩
      lastStep: "", // 最后一步
      currentStep: "", // 当前在第几步
      ids: [],
      steps: [
        { index: 1, title: "揽收" },
        { index: 2, title: "干线/支线" },
        { index: 3, title: "配送" },
        { index: 4, title: "签收" },
        { index: 5, title: "回单" },
        { index: 6, title: "回箱" },
      ], // 总共的步骤 会根据产品类型过滤步骤
      waybillInfo: {},
      is_incubator: false,
      businessType: 0,
      config: {
        is_collect: true,
        is_line_dispatch: true,
        is_distribution: true,
        is_sign: true,
        is_receipt: true,
        is_return_box: true,
      },
      lastStep: 6,
      statusArr: [], //流程节点数据
      statusData: statusArr, //运单状态枚举
      stepsData: [],
      baseData: [
        { step: 1, title: "揽收", key: "collect" },
        { step: 2, title: "干线/支线", key: "dispatch" },
        { step: 3, title: "配送", key: "distribution" },
        { step: 4, title: "签收", key: "sign" },
        { step: 5, title: "回单", key: "receipt" },
        { step: 6, title: "回箱", key: "box_recycle" },
      ],
      mapData: [],
    };
  },
  computed: {
    // currentView() {
    //   return this.viewArr[this.currentStep];
    // },
  },
  watch: {},
  async beforeCreate() {},
  async created() {
    this.ids = [Number(this.$route.query.id)];

    const result = await WaybillDetailFn({ id: this.$route.query.id });
    this.waybillInfo = result.data;

    this.getStepAndStatus();
    let result2 = await getTransportsList({ is_all: false });
    const transData = result2.data.data;
    const typeConfig =
      transData.find(
        (item) => item.id === this.waybillInfo.waybill_product_type
      ) || {};
    // 保温箱
    if (typeConfig.is_incubator === "1") {
      this.is_incubator = true;
    }
    // is_incubator 0常温 1保温箱 2冷链
    // is_complete_vehicle 0零担  1整车
    if (
      typeConfig.is_incubator === "0" &&
      typeConfig.is_complete_vehicle === "0"
    ) {
      // 常温零担
      this.businessType = 1;
    } else if (
      typeConfig.is_incubator === "0" &&
      typeConfig.is_complete_vehicle === "1"
    ) {
      // 常温整车
      this.businessType = 2;
    } else if (
      typeConfig.is_incubator === "2" &&
      typeConfig.is_complete_vehicle === "0"
    ) {
      // 冷链零担
      this.businessType = 3;
    } else if (
      typeConfig.is_incubator === "2" &&
      typeConfig.is_complete_vehicle === "1"
    ) {
      // 冷链整车
      this.businessType = 4;
    } else if (typeConfig.is_incubator === "1") {
      // 保温箱类
      this.businessType = 5;
    }
  },

  beforeMount() {},
  mounted() {},
  provide() {
    return {
      bindTemp: this.bindTemp,
    };
  },

  methods: {
    // 流程节点被点击
    handleStepClick(val) {
      if (val === Number(this.currentStep)) return;
      this.currentStep = val;
    },
    // 子组件调用 温度绑定弹框
    async bindTemp(time, checkedTemp = []) {
      const result = await new Promise((resolve) => {
        this.$msgbox({
          message: (
            <TemperatureBind
              key={Date.now()}
              record={resolve}
              time={time}
              checkedBind={checkedTemp||[]}
            />
          ),
          center: true,
          customClass: "temperature_msg",
          showConfirmButton: false,
          showCancelButton: false,
          showClose: true,
        });
      });
      return result;
    },
    async handleChangeStatus() {
      const result = await WaybillDetailFn({ id: this.$route.query.id });
      this.waybillInfo = result.data;
    },
    /**
     * 获取当前有哪些流程 及对应流程的状态并更新当前在哪个step
     */
    async getStepAndStatus() {
      waybillStepStatus({ id: this.$route.query.id }).then((res) => {
        this.statusArr = res.data;
        const data = res.data;
        let stepsData = this.baseData.map((item) => {
          return { ...item, ...data[item.key] };
        });
        this.stepsData = stepsData.filter((item) => item.is_show === 1);
        // console.log(this.stepsData, 'stepsData');
        const { step = 1 } =
          this.baseData.find((item) => item.key === data.next_operate_node) ||
          {};
        this.currentStep = step;
      });
    },
    async updateFinish() {
      this.getStepAndStatus();
      this.handleChangeStatus();
    },
  },
};
</script>

<style>
.temperature_msg {
  width: auto;
}
</style>
<style lang="less" scoped>
.shareContainer {
  margin-top: -30px;
  // height: calc(100vh - 105px);
}

/deep/.el-step {
  cursor: pointer;

  // .el-step__title.is-process,
  // .el-step__head.is-process {
  //   color: #409EFF;
  //   border-color: #409EFF;
  // }
}

/deep/.current {
  .el-step__title,
  .el-step__head {
    color: #409eff;
    border-color: #409eff;
  }
}

/deep/.progress {
  .el-step__icon {
    // background: red;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #c0c4cc;
    }
  }

  &.current {
    .el-step__icon {
      &::before {
        content: "";
        display: block;
        background-color: #409eff;
      }
    }
  }
}

/deep/.step_line .inputForm .el-form-item__content > .el-input {
  width: 67% !important;
}
/deep/.step_line .inputForm .el-table .el-form-item__content > .el-input {
  width: 100% !important;
}
/deep/.step_line .inputForm .el-form-item__content > .el-select {
  width: 67% !important;
}
/deep/.step_line .inputForm .select-add .el-form-item__content > .select-left {
  padding-right: 30px;
  box-sizing: border-box;
  border-radius: 4px 0 0 4px;
}

/deep/.step_line
  .inputForm
  .select-add
  .el-form-item__content
  > .select-left
  .el-input__inner {
  border-radius: 4px 0 0 4px;
}
/deep/.step_line .inputForm .select-add .el-form-item__content {
  display: flex;
}
/deep/.step_line .inputForm .select-add .add-right {
  width: 30px;
  position: relative;
  left: -30px;
  padding: 0;
  height: 28px;
  border-radius: 0 4px 4px 0;
  border-left-width: 0px;
  font-size: 18px;
  font-weight: bold;
}
/deep/.step_line .inputForm .select-add .add-right:active {
  border-color: #c6e2ff;
}
/deep/.step_line .inputForm .el-form-item__content > .el-cascader {
  width: 67% !important;
}
/deep/.step-tab.el-tabs--border-card {
  border: none;
}

.step_th {
  width: 97%;
  height: 40px;
  line-height: 40px;
  padding: 0px 20px;
  background: #eee;
  border-radius: 3px 3px;
  // margin-bottom: 20px;
}

.step_content {
  background-color: white;
  // padding: 30px 15px;
}

.line {
  // background: #eee
  background: red;
}

.next {
  position: fixed;
  right: 0;
  top: 76vh;
  z-index: 111;
  cursor: pointer;
  color: #515a6e;
}
</style>
